<template>
  <view class="flex-col-hcenter">
    <!-- info -->
    <view class="top-box">
      <view class="flex-vcenter flex-jcsb" style="padding: 34rpx 52rpx 56rpx 36rpx">
        <view>
          <text style="font-size: 32rpx; letter-spacing: 2rpx">账户余额</text>
          <text style="font-size: 26rpx; padding: 0 6rpx 0 10rpx">¥</text>
          <text style="font-size: 50rpx">{{ balance }}</text>
        </view>
        <view style="display: flex; flex-direction: column">
          <button class="recharge-btn" @click="navTo('mine/Recharge')">充 值</button>
          <button
            class="recharge-btn"
            @click="navTo('account/withdraw')"
            style="margin-top: 20rpx; background-color: transparent; border: 1px solid #fff; box-sizing: border-box"
          >
            提 现
          </button>
        </view>
      </view>
      <view class="info-box">
        <view class="flex-col-hcenter item">
          <view>累计充值</view>
          <view class="amount">{{ recharge }}</view>
        </view>
        <view class="split-line"></view>
        <view class="flex-col-hcenter item">
          <view>累计提现</view>
          <view class="amount">{{ withdraw }}</view>
        </view>
        <view class="split-line"></view>
        <view class="flex-col-hcenter item">
          <view>累计消费</view>
          <view class="amount">{{ consume }}</view>
        </view>
      </view>
      <view style="width: 100%">
        <!-- <view class="flex-center withdraw-btn" @click="navTo('withdraw')">申请提现</view> -->
      </view>
    </view>
    <!-- filter -->
    <view class="flex-vcenter filter-box">
      <uni-datetime-picker
        v-model="range"
        type="daterange"
        :border="false"
        :clear-icon="false"
        rangeSeparator="至"
        :end="end"
        @change="change"
      />
    </view>
    <!-- list -->
    <scroll-view :scroll-y="true" class="list-box" @scrolltolower="toLoadmore" :style="{ height: pageHeight + 'px' }">
      <view v-if="isEmpty" class="flex-col-hcenter" style="padding-top: 60rpx">
        <image :src="Empty" style="width: 352rpx; height: 352rpx"></image>
        <text class="tip">暂无使用记录</text>
      </view>
      <view v-else class="list-item" v-for="(item, index) in list" :key="index">
        <view class="flex-jcsb" style="font-size: 30rpx">
          <view>{{ item.memo }}</view>
          <view :class="item.type + '-text'" style="font-weight: bold">{{ item.money }}</view>
        </view>
        <view class="flex-jcsb" style="margin-top: 10rpx; font-size: 26rpx">
          <view style="color: #666">{{ item.createtime }}</view>
          <view>{{ item.use_driver_name }}</view>
        </view>
      </view>
      <uni-load-more v-if="!isEmpty" :status="loadmoreStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { accountInfo, accountRecord } from '@/gql/account';
import { AccountInfoQuery, AccountRecordQuery } from '@/gql/types/gql';
import { getDriverID } from '@/stores/driverID';
import { navTo, } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import { onShow } from '@dcloudio/uni-app';
import { Empty } from '@/utils/Static';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { computed, ref, onMounted } from 'vue';
import { isH5 } from '@/utils/platform';

// static
const driver_id = getDriverID();
const balance = ref('');
const recharge = ref('');
const withdraw = ref('');
const consume = ref('');
const list = ref([]);

// data
const pageHeight = ref('');
let now = new Date();
let end = format(now, 'yyyy-MM-dd');
let daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const page = ref(1);
const lastpage = ref(1);
const range = ref([start, end]);
const isLoading = ref(true);
const isEmpty = computed(() => !isLoading.value && list.value.length === 0);
const loadmoreStatus = computed(() => {
  return isLoading.value ? 'loading' : page.value === lastpage.value ? 'noMore' : 'more';
});
onMounted(() => {
  const num = isH5 ? 340 : 370;
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
function getAccountInfo() {
  showLoading();
  const payload = {
    query: accountInfo,
    variables: { driver_id },
  };
  toPublish('ql/driver/getTotalList', payload, (obj: { data: AccountInfoQuery }) => {
    const { total_list } = obj.data;
    balance.value = total_list.money.toString();
    recharge.value = total_list.total_recharge.toString();
    withdraw.value = total_list.total_withdraw.toString();
    consume.value = total_list.total_consume.toString();
  });
}

function getList(callback: (obj: { data: AccountRecordQuery }) => void) {
  isLoading.value = true;
  const payload = {
    query: accountRecord,
    variables: {
      driver_id,
      page: page.value,
      start,
      end,
    },
  };
  toPublish('ql/driver/moneylogList', payload, callback);
}

function resetDateRange() {
  now = new Date();
  end = format(now, 'yyyy-MM-dd');
  daysAgo = subDays(now, 6);
  start = format(daysAgo, 'yyyy-MM-dd');
  range.value = [start, end];
}

onShow(() => {
  getAccountInfo();
  resetDateRange();
  getList(reloadList);
});

function reloadList({ data }: { data: AccountRecordQuery }) {
  isLoading.value = false;
  const { moneylog_list } = data;
  list.value = moneylog_list.list;
  page.value = 1;
  lastpage.value = moneylog_list.lastpage;
}

function toLoadmore() {
  if (page.value < lastpage.value) {
    page.value += 1;
    getList(loadmore);
  }
}

function loadmore({ data }: { data: AccountRecordQuery }) {
  isLoading.value = false;
  const { moneylog_list } = data;
  list.value.push(...moneylog_list.list);
}

function change([startFrom, endTo]: string[]) {
  page.value = 1;
  start = startFrom;
  end = endTo;
  getList(reloadList);
}
</script>

<style scoped lang="less">
.cancon_top {
  width: 100%;
  background-color: white;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-content: center;
  justify-content: space-around;
  height: 44px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9;

  text {
    width: 30%;
    text-align: center;
    color: rgb(51, 51, 51);
    font-size: 17px;
    font-weight: normal;
  }
}

.top-box {
  background-image: url(../../static/account/account-top-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 720rpx;
  height: 364rpx;
  margin-top: 16rpx;
  color: white;
}

.recharge-btn {
  width: 200rpx;
  height: 64rpx;
  background: #fd9b00;
  border-radius: 5px;
  color: white;
  font-size: 28rpx;
  letter-spacing: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
}

.info-box {
  display: grid;
  grid-template-columns: 244rpx 2rpx 244rpx 2rpx 244rpx;
  align-items: center;

  .item {
    font-size: 26rpx;
    letter-spacing: 2rpx;

    .amount {
      font-size: 34rpx;
    }

    .amount::before {
      content: '¥';
      font-size: 26rpx;
      color: white;
    }
  }

  .split-line {
    height: 50rpx;
    background-color: rgba(255, 255, 255, 0.4);
  }
}

.withdraw-btn {
  margin-left: 50rpx;
  margin-top: 30rpx;
  width: 200rpx;
  height: 64rpx;
  border-radius: 5px;
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  letter-spacing: 6rpx;
}

.filter-box {
  margin-top: 20rpx;
  width: 720rpx;
  height: 80rpx;
  background: white;
  box-shadow: 2rpx 4rpx 8rpx 0 rgba(204, 204, 204, 0.5);
  border-radius: 5px;
}

.arrow-down {
  width: 32rpx;
  height: 32rpx;
}

.tip {
  margin-top: 14rpx;
  font-size: 24rpx;
  color: #999;
}

.list-box {
  margin-top: 20rpx;
  width: 710rpx;
  // min-height: 670rpx;
  // height: calc(100vh - 600rpx);
  background: white;
  box-shadow: 2rpx 4rpx 8rpx 0 rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  padding: 0px 0px 30rpx 0;
  box-sizing: border-box;
  color: #333;

  .list-item {
    padding: 30rpx;
    border-top: 2rpx solid #f2f2f2;

    &:first-child {
      border-top: none;
    }

    .recharge-text {
      color: #1b91ff;
    }

    .withdraw-text {
      color: #ff3d3d;
    }
  }
}
</style>
<style>
.filter-box >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.filter-box >>> .uni-date-x {
  font-size: 30rpx !important;
  background-color: transparent !important;
}
.filter-box >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
